<template>
  <div class="div1">
    <div class="div2">
      <div class="header">
        <img src="./img/headers/juxing1.png" width="100px" height="6px" style="margin:12px 0px 0px 20px;float: left;">
        <img src="./img/headers/juxing2.png" width="100px" height="6px" style="margin:12px 20px 0px 0px;float: right;">
        <p class="p1">数据可视化</p>
        <p style="float: right;color: white;margin-top: -10px;">{{date1}}</p>
        <img src="./img/guang.png" style="margin-top: -39px;" />
      </div>
      <div class="center">
        <div class="leftdiv">
          <div class="left" ref="lefttop"></div>
          <div class="left" ref="leftcenter"></div>
          <div class="left" ref="leftbottom"></div>
        </div>
        <div class="centerdiv">
          <div class="center1" ref="centertop"></div>
          <div class="center1" ref="centerbottom"></div>
        </div>
        <div class="rightdiv">
          <div class="right" ref="righttop"></div>
          <div class="right" ref="rightcenter"></div>
          <div class="right" ref="rightbottom"></div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  export default {
    data() {
      return {
        date1:''
      }
    },
    methods:{
      datetime(){
        let date = new Date()
        this.date1 = date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()+'日'+' '
        +date.getHours()+'小时'+date.getMinutes()+'分'+date.getSeconds()+'秒'
      }
    },
    mounted() {
      this.datetime()
      setInterval(()=>{
       this.datetime()
      },1000)
      let lefttop = echarts.init(this.$refs.lefttop)
      let option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        title: {
          text: '能耗总览',
          textStyle: {
            color: 'white',
            family: 'Microsoft YaHei'
          },
          top: 10,
          left: 10
        },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }]
      }
      lefttop.setOption(option)
      let leftcenter = echarts.init(this.$refs.leftcenter)
      let option1 = {
        title: {
          text: '耗能占比',
          padding: 10,
          textStyle: {
            color: 'white',
            family: 'Microsoft YaHei'
          },
          top: 10,
          left: 10
        },
        tooltip: {
          trigger: 'item'
        },
        series: [{
          name: 'Access From',
          type: 'pie',
          data: [{
              value: 1048,
              name: '项目1'
            },
            {
              value: 735,
              name: '项目2'
            },
            {
              value: 580,
              name: '项目3'
            },
            {
              value: 484,
              name: '项目4'
            },
            {
              value: 300,
              name: '项目5'
            }
          ]
        }]
      };
      leftcenter.setOption(option1)
      let leftbottom = echarts.init(this.$refs.leftbottom)
      let option2 = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line'
        }]
      }
      leftbottom.setOption(option2)
      let centertop = echarts.init(this.$refs.centertop)
      let option3 = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        title: {
          text: '能耗总览',
          textStyle: {
            color: 'white',
            family: 'Microsoft YaHei'
          },
          top: 10,
          left: 10
        },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }]
      }
      centertop.setOption(option3)
      let centerbottom = echarts.init(this.$refs.centerbottom)
      let option4 = {
        title: {
          text: '销售计划完成率',
          padding: 10,
          textStyle: {
            color: 'white',
            family: 'Microsoft YaHei'
          },
          top: 10,
          left: 10
        },
        tooltip: {
          trigger: 'item'
        },
        series: [{
          name: 'Access From',
          type: 'pie',
          data: [{
              value: 1048,
              name: '已完成'
            },
            {
              value: 235,
              name: '未完成2'
            }
          ]
        }]
      };
      centerbottom.setOption(option4)
      let righttop = echarts.init(this.$refs.righttop)
      let option5 = {
        xAxis: {
          type: 'value',
        },
        yAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        title: {
          text: '销售统计',
          textStyle: {
            color: 'white',
            family: 'Microsoft YaHei'
          },
          top: 10,
          left: 10
        },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }]
      }
      righttop.setOption(option5)
      let rightcenter = echarts.init(this.$refs.rightcenter)
      let option6 = {
        title:{
          text:'销售排名',
          textStyle: {
            color: 'white',
            family: 'Microsoft YaHei'
          },
          top: 10,
          left: 10
        },
        dataset: [{
            dimensions: ['name', 'score'],
            source: [
              ['销售1', 314],
              ['销售2', 351],
              ['销售3', 287],
              ['销售4', 219],
              ['销售5', 253],
              ['销售6', '-'],
              ['销售7', 165],
              ['销售8', 318],
            ]
          },
          {
            transform: {
              type: 'sort',
              config: {
                dimension: 'score',
                order: 'desc'
              }
            }
          }
        ],
        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0,
            rotate: 30
          }
        },
        yAxis: {},
        series: {
          type: 'bar',
          encode: {
            x: 'name',
            y: 'score'
          },
          datasetIndex: 1
        }
      };
      rightcenter.setOption(option6)
      let rightbottom = echarts.init(this.$refs.rightbottom)
      let option7 = {
        title: {
          text: '生产统计',
          padding: 10,
          textStyle: {
            color: 'white',
            family: 'Microsoft YaHei'
          },
          top: 10,
          left: 10
        },
        tooltip: {
          trigger: 'item'
        },
        series: [{
          name: 'Access From',
          type: 'pie',
          data: [{
              value: 1048,
              name: '项目1'
            },
            {
              value: 735,
              name: '项目2'
            },
            {
              value: 580,
              name: '项目3'
            },
            {
              value: 484,
              name: '项目4'
            },
            {
              value: 300,
              name: '项目5'
            }
          ]
        }]
      };
      rightbottom.setOption(option7)
    }
  }
</script>

<style scoped>
  .div1 {
    background: url('img/pageBg.png');
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }

  .div2 {
    width: 84%;
    height: 100vh;
    margin: 0 auto;
  }

  .header {
    background: url('img/top.png') center no-repeat;
    width: 100%;
    height: 90px;
    overflow: hidden;
  }

  .p1 {
    text-align: center;
    margin: 10px 0px 0px;
    color: white;
    font-size: 36px;
  }

  .center {
    width: 100%;
    height: 100%;
    display: flex;
  }

  .leftdiv {
    flex: 3;
    margin-right: 10px;
  }

  .centerdiv {
    flex: 4;
    margin-right: 10px;
  }

  .rightdiv {
    flex: 3;
  }

  .left {
    width: 100%;
    height: 29%;
    background: url('img/center_map.png') no-repeat;
    margin-bottom: 10px;
  }

  .center1 {
    width: 100%;
    height: 43%;
    margin-bottom: 10px;
    background: url('img/center_map.png') no-repeat;
  }

  .right {
    width: 100%;
    height: 29%;
    background: url('img/center_map.png') no-repeat;
    margin-bottom: 10px;
  }
</style>
